<template>
  <div class="page-container">
    <el-card class="box-card">

<!--    TODO !!!百度网盘跨域限制目前暂时搁置,实测可以代理转发绕过,但是不知道百度法务部厉不厉害!!!-->
      <video-play :src="options.src"
                  :type="options.type"
                  :autoPlay="false"
                  :poster="data.poster"
      />
    </el-card>

  </div>
</template>

<script>
import {onMounted, reactive, toRefs, ref} from "vue";
import { usePlayerStates } from '/@/stores/course/player'
import {getAdToken, getM3U8} from "../../../api/oa/course";
import 'vue3-video-play/dist/style.css'
import { videoPlay } from 'vue3-video-play'


export default {
  name: "index",
  components: {
    videoPlay
  },
  setup(props, context) {
    const storesPlayer = usePlayerStates();
    const state = reactive({
      playVisible:false,
      data:'',
      form:{
        adToken:'',
        path:'',
        appName:'',
        fileName:'',
        type:1
      },
      options:{
        width: '800px', //播放器高度
        height: '450px', //播放器高度
        color: "#409eff", //主题色
        type: "m3u8", //视频类型
        src:'https://czy-common-oss.oss-cn-guangzhou.aliyuncs.com/m3u8/%E6%AF%95%E8%AE%BE%E8%A7%86%E9%A2%91.m3u8',
        title: '', //视频名称
        muted: false, //静音
        webFullScreen: false,
        speedRate: ["0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速
        autoPlay: false, //自动播放
        loop: false, //循环播放
        mirror: false, //镜像画面
        ligthOff: false,  //关灯模式
        volume: 0.3, //默认音量大小
        control: true, //是否显示控制
        controlBtns:['audioTrack', 'quality', 'speedRate', 'volume', 'setting', 'pip', 'pageFullScreen', 'fullScreen'] //显示所有按钮,
      },
    })

    //获取视频数据
    const getVideo = () => {
      getAdToken(state.form).then(res =>{
        if(res.data.adToken){
          setTimeout(() => {
            state.form.adToken = res.data.adToken
            getM3U8(state.form).then(res =>{ //5秒后在请求一次
              //state.options.src = res.data.src
              state.playVisible = true
            })
          }, res.data.ltime * 5000);
        }else{
          //需要轮询
          console.log("等待解码")
        }
      })
    }
    onMounted(() => {
      state.data = storesPlayer.PlayerStates
      state.form.fileName = state.data.fileName
      state.form.path = state.data.path
      getVideo()
    })
    return{
      ...toRefs(state),
      videoPlay,
      getVideo,

    }
  }


}
</script>

<style scoped>

</style>
